import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)
import axios from 'axios'

export default new Vuex.Store({
  // strict:true,//开启语法严格模式

  state: {
    list: []
  },
  getters: {

  },
  mutations: {
    changeList (state, m) {
      state.list = m
    },
    DelList (state, id) {
      state.list = state.list.filter(item => item.id != id)
    },
    gaiList (state, data) {
      const obj1 = state.list.find(item => item.id == data.id)
      obj1.bookname = data.bookname
      obj1.author = data.author
      obj1.publisher = data.publisher
      obj1.id = data.id


    },
    addList (state, ll) {
      state.list.push(ll)
    }
  },
  actions: {
    //渲染
    async getList (content) {
      const res = await axios({
        url: 'http://ajax-api.itheima.net/api/books'
      })

      content.commit('changeList', res.data.data)
    },
    //删除图书
    async del (content, id) {
      //这里是删除后台数据
      await axios.delete('http://ajax-api.itheima.net/api/books/' + id)
      //这里是渲染更新数据用户界面

      content.commit('DelList', id)
    },
    //编辑功能
    async qd (content, data) {



      await axios({
        url: 'http://ajax-api.itheima.net/api/books/' + data.id,
        method: 'put',
        data
      })

      content.commit('gaiList', data)


    },
    //添加功能
    async add (content, data) {


      const res = await axios({
        url: 'http://ajax-api.itheima.net/api/books',
        method: 'post',
        data
      })
      const ll = res.data.data
      content.commit('addList', ll)

    }
  },
  modules: {

  }
})
